<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            #box2{
                width: 100%;
                height: 50px;
            }
            .item{
                float: left;
                width: 100px;
                height: 50px;
                background-color: white;
                margin-left: 5px;
                text-align: center;
                border: 10px solid red;
                text-shadow:5px  5px  2px red;
 /* 第一个像素值设置阴影与文本的水平偏移量：它横移的距离。
第二个像素值设置阴影与文本的垂直偏移量：它向下移动的距离。
第三个像素值设置阴影的模糊半径。一个更大的值会产生一个更模糊的阴影。
第四个值设置阴影的基色。 */
            }
             a{
                color: black;
                text-decoration: none;
                /* 让a标签下面没有下划线 */
             }   
             a:hover{
                color: blue;
             }
             #box3{
                height: 248px;
                width: 100%;
                /* background-color:aqua; */
                /* border: 1px solid red; */
             }
             img{
                width: 300px;
                height: 248px;
                margin-left: 600px;
                
             }
            
    </style>
</head>
<body>
    <div id="box2">
        <div class="item">
            <a href="">新闻</a>
        </div>
        <div class="item">
            <a href="">新闻</a>
        </div>
        <div class="item">
            <a href="">新闻</a>
        </div>
        <div class="item">
            <a href="">新闻</a>
        </div>
        <div class="item"> <a href="">新闻</a></div>
        <div class="item"> <a href="">新闻</a></div>
    </div>
    <div id="box3">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>
    </div>
</body>
</html>